<template>
    <div>
        <div class="progress-info">
            <div class="title"> 
                |&nbsp;{{ $t('langObj.machineStatus') }}
            </div>
            <div class="progress-block">
                <div>
                    <p>{{ $t('langObj.cpu') }}:{{ $t('langObj.used') }} {{qutoList.usedCpu}}Core/{{ $t('langObj.total') }} {{qutoList.totalCpu}}Core</p>
                    <Progress style="width:200px" :percent="qutoList.cpuPercent" :stroke-width="5" status="active" />
                </div>
                <div>
                    <p>{{ $t('langObj.memory') }}:{{ $t('langObj.used') }} {{qutoList.usedMemory}}Gi/{{ $t('langObj.total') }} {{qutoList.totalMemory}}Gi</p>
                    <Progress style="width:200px" :percent="qutoList.memoryPercent"  :stroke-width="5" status="active" />
                </div>
                <div>
                    <p>{{ $t('langObj.storage') }}:{{ $t('langObj.used') }} {{qutoList.usedStorage}}Gi/{{ $t('langObj.total') }} {{qutoList.storage}}Gi</p>
                    <Progress style="width:200px" :percent="qutoList.storagePercent" :stroke-width="5" status="active" />
                </div>
            </div>
        </div>
        <project-desc v-for="item in projectList" :key="item.taskId" 
            :item="item"
            @projectShare="projectShare"
            @projectRelease="projectRelease"
            @projectDelete="deletePro">
        </project-desc>
    </div>
</template>

<script>
import { mapActions } from 'vuex';
import { domain } from '@/utils/host';
import projectDesc from '@/components/user/projectDesc';
export default {
    components:{projectDesc},
    data() {
        return {
            projectList:[],
            qutoList:{}
        }
    },
    methods: {
        ...mapActions(['XquotaCheck','XgetProjectList','XprojectShare','XprojectRelease','XprojectDelete']),
        projectShare(taskId){
            this.XprojectShare(taskId).then(res => {
                this.$Message.success("分享成功")
            })
            .catch(err => {
                this.$Message.error(err.response.data.message)
            })
        },
        projectRelease(params){
            this.XprojectRelease(params).then(res => {
                this.$Message.success("释放成功");
                this._pageMounte();
            })
            .catch(err => {
                this.$Message.error(err.response.data.message)
            })
        },
        deletePro(taskId){
            this.XprojectDelete(taskId).then(res => {
                this.$Message.success("删除成功");
                this._pageMounte();
            })
            .catch(err => {
                this.$Message.error(err.response.data.message)
            })
        },
        async _pageMounte(){
            try{
                [{data:this.qutoList},{data:this.projectList}] = await Promise.all([this.XquotaCheck(),this.XgetProjectList()])
            }catch(e){

            }

        }
    },
    created() {
        this._pageMounte()
    },
}
</script>

<style lang="scss" scoped>
    .progress-info{
        margin:50px;
        .title{
            font-size:16px;
            font-weight:bold;
            color:rgba(51,51,51,1);
        }
        .progress-block{
            margin-top:40px;
            display: flex;
            justify-content: space-around;
            font-size:12px;
            font-weight:400;
            color:rgba(51,51,51,1);
        }
    }
</style>